import { Navigate, Outlet, useLocation, useNavigate, NavLink } from 'react-router-dom'
import { useState, useEffect } from 'react'
import BaseHeader from '@/components/BaseHeader'
import ThemeDemo from '@/components/ThemeDemo'
import { AppstoreOutlined, MailOutlined, SettingOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import { ConfigProvider, theme, Layout, Menu, Button, Switch, Watermark, Skeleton, FloatButton } from 'antd';
const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
import { useSelector, useDispatch } from 'react-redux'
import { changeIsFullScreen } from '@/store/home'
const { Header, Sider } = Layout;
function Home() {
    // 使用state中的数据
    const isFullScreen = useSelector((state) => state.home.isFullScreen)
    const dispatch = useDispatch()
    const locations = useLocation()
    const navigate = useNavigate()
    console.log('locations', locations)
    const [collapsed, usecollapsed] = useState(false)
    const [theme, setTheme] = useState('light');
    const onCollapse = () => {
        usecollapsed(!collapsed)
    }
    const changeTheme = (value) => {
        setTheme(value ? 'light' : 'dark');
    };


    // const items = [
    //     {
    //         key: 'sub1',
    //         label: 'Navigation One',
    //         icon: <MailOutlined />,
    //     },
    //     {
    //         key: 'sub1',
    //         label: 'Navigation One',
    //         icon: <MailOutlined />,
    //         children: [
    //             {
    //                 key: 'g1',
    //                 label: 'Item 1',
    //                 type: 'group',
    //                 children: [
    //                     { key: 'fly1', label: 'Option 1' },
    //                     { key: 'fly2', label: 'Option 2' },
    //                     { key: 'fly3', label: 'Option 3' },
    //                 ],
    //             },
    //             {
    //                 key: 'g2',
    //                 label: 'Item 2',
    //                 type: 'group',
    //                 children: [
    //                     { key: '3', label: 'Option 3' },
    //                     { key: '4', label: 'Option 4' },
    //                 ],
    //             },
    //         ],
    //     },
    //     {
    //         key: 'sub2',
    //         label: 'Navigation Two',
    //         icon: <AppstoreOutlined />,
    //         children: [
    //             { key: '5', label: 'Option 5' },
    //             { key: '6', label: 'Option 6' },
    //             {
    //                 key: 'sub3',
    //                 label: 'Submenu',
    //                 children: [
    //                     { key: '7', label: 'Option 7' },
    //                     { key: '8', label: 'Option 8' },
    //                 ],
    //             },
    //         ],
    //     },
    //     {
    //         type: 'divider',
    //     },
    //     {
    //         key: 'sub4',
    //         label: 'Navigation Three',
    //         icon: <SettingOutlined />,
    //         children: [
    //             { key: '9', label: 'Option 9' },
    //             { key: '10', label: 'Option 10' },
    //             { key: '11', label: 'Option 11' },
    //             { key: '12', label: 'Option 12' },
    //         ],
    //     },
    //     {
    //         key: 'grp',
    //         label: 'Group',
    //         type: 'group',
    //         children: [
    //             { key: '13', label: 'Option 13' },
    //             { key: '14', label: 'Option 14' },
    //         ],
    //     },
    // ];

    const items = [
        {
            key: 'study',
            label: 'study',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'gitee',
            label: 'gitee',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'yinxiang',
            label: 'yinxiang',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'calendars',
            label: 'calendars',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'tours',
            label: 'tours',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'classes',
            label: 'classes',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slots',
            label: 'slots',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot1',
            label: 'slot1',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot2',
            label: 'slot2',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot3',
            label: 'slot3',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot4',
            label: 'slot4',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot5',
            label: 'slot5',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'slot6',
            label: 'slot6',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'ListSCroll',
            label: 'ListSCroll',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'ShowEcharts',
            label: 'ShowEcharts',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'HomePage',
            label: 'HomePage',
            icon: <SettingOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'ListPage',
            label: 'ListPage',
            icon: <SettingOutlined />,
        },
    ]

    // 主题配置
    const themes = {
        light: {
            algorithm: defaultAlgorithm,
            token: {
                colorPrimary: '#1890ff',
                colorBgBase: '#ffffff',
                colorTextBase: '#000000',
            },
        },
        dark: {
            algorithm: darkAlgorithm,
            token: {
                colorPrimary: '#1890ff',
                colorBgBase: '#000000',
                colorTextBase: '#ffffff',
            },
        },
        compact: {
            algorithm: compactAlgorithm,
            token: {
                colorPrimary: '#52c41a',
            },
        },
    };
    const [currentTheme, setCurrentTheme] = useState('light');
    const [init, useInit] = useState(false)

    const [selectedKeys, setSelectedKeys] = useState([]);
    // useEffect(() => {
    //     setSelectedKeys([items[0].key]); // 假设第一个菜单项的key为1
    //     // 调用点击事件的处理函数
    //     onClick({ key: items[0].key }); // 假设第一个菜单项的key为'1'
    // }, []);

    const onClick = (e) => {
        console.log('click ', e);
        setSelectedKeys([e.key])
        navigate(e.key, {
            state: {
                name: 'zs',
            },
            replace: true
        });
    };
    (function () {
        setTimeout(() => {
            useInit(true)
        }, 1000)
    })()

    const onActionFun = (message) => {
        console.log('message', message)
        setCurrentTheme(message)
    }


    useEffect(() => {
        window.addEventListener('keydown', (e) => {
            // console.log('e', e.code === 'Escape' && isFullScreen)
            // if (e.code === 'Escape' && isFullScreen) {
            //     dispatch(changeIsFullScreen())
            // }
        })

        return window.removeEventListener('keydown', () => { })
    }, [])

    return (
        <ConfigProvider theme={themes[currentTheme]}>
            {init ?
                (isFullScreen ? <Layout style={{ overflow: 'auto', padding: '10px', height: '100%' }} >
                    <Outlet></Outlet>
                </Layout> : <Layout style={{ height: '100%', position: 'relative' }} >
                    <Header style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
                        <BaseHeader>
                            <ThemeDemo currentTheme={currentTheme} onAction={onActionFun}></ThemeDemo>
                        </BaseHeader>
                    </Header>
                    <Layout>
                        <Sider style={{ background: 'white', overflow: 'auto' }} collapsed={collapsed} collapsible={true} onCollapse={onCollapse}>
                            <Menu
                                theme={theme}
                                onClick={onClick}
                                style={{ width: '100%', height: '100%', overflow: 'auto' }}
                                selectedKeys={[locations.pathname.split('/')[2]]}
                                mode="inline"
                                items={items}
                            />
                        </Sider>
                        <Layout style={{ overflow: 'auto', padding: '10px', height: '100%' }} >
                            <Outlet></Outlet>
                        </Layout>
                    </Layout>
                </Layout>)
                : <Skeleton active />
            }
            <FloatButton icon={isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} style={{
                insetInlineEnd: 24,
            }} onClick={() => { dispatch(changeIsFullScreen()) }} />
            <FloatButton icon={isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} style={{
                insetInlineEnd: 60,
            }} onClick={() => { changeTheme() }} />
        </ConfigProvider>
    )
}
export default Home